<template>
  <div class="mt20">
    <a-row :gutter="16">
      <a-col :span="6">
        <cardVue
          :title="'销售额'"
          :bordered="true"
          :total="'¥ 126,560.00'"
          footer="日销售额 12,423"
          contentHeight="46"
        >
          <template #action>
            <a-tooltip placement="right">
              <template #title>
                <span>指标说明</span>
              </template>
              <InfoCircleOutlined />
            </a-tooltip>
          </template>

          <div>
            <trendVue :flag="'up'">
              <span class="font12">周同比 10%</span>
            </trendVue>
          </div>
          <div>
            <trendVue :flag="'down'">
              <span class="font12">日同比 10%</span>
            </trendVue>
          </div>
        </cardVue>
      </a-col>
      <a-col :span="6">
        <cardVue
          :title="'访问量'"
          :bordered="true"
          :total="'8,848 %'"
          footer="日访问量 12,423"
          contentHeight="46"
        >
          <template #action>
            <a-tooltip placement="right">
              <template #title>
                <span>指标说明</span>
              </template>
              <InfoCircleOutlined />
            </a-tooltip>
          </template>
          <v2MiniAreaVue
            :yTooltipSuffix="'个'"
            :data="{
              x: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              y: [1, 4, 2, 5, 4, 3, 2],
            }"
            :line="false"
          ></v2MiniAreaVue>
        </cardVue>
      </a-col>
      <a-col :span="6">
        <a-card :bordered="false" size="small">
          <a-statistic :value="'8,848'">
            <template #title>
              <div class="flex-box justifyContentb alignItemsc">
                <span>支付笔数</span>
                <a-tooltip placement="right">
                  <template #title>
                    <span>指标说明</span>
                  </template>
                  <InfoCircleOutlined />
                </a-tooltip>
              </div>
            </template>
          </a-statistic>
          <div class="mb12 h44 font12 flex-box position-re">
            <div id="zfbs" class="h44" style="width: 100%"></div>
          </div>
          <div class="font12 cobt">
            <span>转化率</span>
            <span class="ml15">60%</span>
          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card :bordered="false" size="small">
          <a-statistic :value="78" :precision="0" suffix="%">
            <template #title>
              <div class="flex-box justifyContentb alignItemsc">
                <span>运营活动效果</span>
                <a-tooltip placement="right">
                  <template #title>
                    <span>指标说明</span>
                  </template>
                  <InfoCircleOutlined />
                </a-tooltip>
              </div>
            </template>
          </a-statistic>
          <div class="mb12 h44 font12 flex-box position-re">
            <div class="contentFixed">
              <div class="miniProgress">
                <div class="target" style="left: 80%">
                  <span style="background-color: rgb(19, 194, 194)"></span>
                  <span style="background-color: rgb(19, 194, 194)"></span>
                </div>
                <div class="progressWrap">
                  <div
                    class="progress"
                    style="background-color: rgb(19, 194, 194); width: 78%; height: 8px"
                  ></div>
                </div>
              </div>
            </div>
          </div>
          <div class="font12 cobt">
            <div class="flex-box alignItemsc">
              <trendVue :flag="'up'">
                <span class="font12">周同比 10%</span>
              </trendVue>
              <trendVue class="ml8" :flag="'down'">
                <span class="font12">日同比 10%</span>
              </trendVue>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <a-row :justify="'start'" class="bgff_pdlr16 mt20">
      <a-col flex="1">
        <a-tabs
          @change="changTabs"
          :destroyInactiveTabPane="true"
          :animated="true"
          :type="'line'"
        >
          <template #rightExtra>
            <div class="flex-box alignItemsc">
              <div class="sales-extra flex-box">
                <span
                  v-for="(item, index) in time"
                  :class="{ select: timeSeleftKey == index }"
                  @click="timeSelect(item.key)"
                  :key="index"
                  >{{ item.name }}</span
                >
              </div>
              <div>
                <a-range-picker v-model:value="value2" />
              </div>
            </div>
          </template>
          <a-tab-pane key="1" tab="销售额">
            <div class="flex-box">
              <v2BarVue
                :data="sale"
                :height="300"
                :title="'销售额'"
                :color="'#1890ff'"
                :padding="[0, 60, 0, 0]"
                @clickItem="clickeven"
              ></v2BarVue>
              <div class="rank xl-2-6">
                <h4 class="ranking-title">门店销售额排名</h4>
                <ul class="rank-list">
                  <li v-for="(item, index) in listrank" :key="index">
                    <span class="number" :class="{ active: index < 2 }">{{
                      index + 1
                    }}</span>
                    <span class="title">{{ item.title }}{{ index }} 号店</span>
                    <span class="value">323,234</span>
                  </li>
                </ul>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="访问量">
            <div class="flex-box">
              <v2BarVue
                :data="visi"
                :height="300"
                :title="'销售额'"
                :color="'#1890ff'"
                :padding="[0, 60, 0, 0]"
              ></v2BarVue>
              <div class="rank xl-2-6">
                <h4 class="ranking-title">门店销售额排名</h4>
                <ul class="rank-list">
                  <li v-for="(item, index) in listrank" :key="index">
                    <span class="number" :class="{ active: index < 2 }">{{
                      index + 1
                    }}</span>
                    <span class="title">{{ item.title }}{{ index }} 号店</span>
                    <span class="value">323,234</span>
                  </li>
                </ul>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </a-col>
    </a-row>
    <a-row class="mt20" :justify="'start'" :gutter="16">
      <a-col :span="12">
        <div class="bgfff">
          <h4 class="line-height-28 border-b-1-soild-f0f0f0 font-12 text-index-12">
            线上热门搜索
          </h4>
          <div class="flex-box pd10">
            <div class="flex-1">
              <numberInfoVue
                :subTitle="'搜索用户数'"
                :total="'12,321'"
                :subTotal="17.1"
                status="up"
              >
                <template #subTitle>
                  <a-tooltip class="ml5" placement="right">
                    <template #title>
                      <span>指标说明</span>
                    </template>
                    <InfoCircleOutlined />
                  </a-tooltip>
                </template>
              </numberInfoVue>
              <div style="padding-right: 95px">
                <v2MiniAreaVue
                  :yTooltipSuffix="'个'"
                  :data="{
                    x: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    y: [1, 4, 2, 5, 4, 3, 2],
                  }"
                  :line="true"
                ></v2MiniAreaVue>
              </div>
            </div>
            <div class="flex-1">
              <numberInfoVue
                :subTitle="'人均搜索次数'"
                :total="'12'"
                :subTotal="27.1"
                status="down"
              ></numberInfoVue>
              <div style="padding-right: 45px">
                <v2MiniAreaVue
                  :yTooltipSuffix="'个'"
                  :data="{ x: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], y: y }"
                  :tooltipType="'mini'"
                  :line="true"
                  @clickItem="submitChange"
                ></v2MiniAreaVue>
              </div>
            </div>
          </div>
          <div class="table">
            <a-table
              :pagination="pagination"
              :size="'small'"
              :dataSource="dataSource"
              :columns="columns"
            >
              <template v-slot:bodyCell="{ text, record, index, column }">
                <template v-if="column.key == 'weekUp'">
                  <trendVue class="ml8" :flag="'up'">{{ text }}%</trendVue>
                </template>
              </template>
            </a-table>
          </div>
        </div>
      </a-col>
      <a-col :span="12">
        <div class="bgfff">
          <h4 class="line-height-28 border-b-1-soild-f0f0f0 font-12 text-index-12">
            线上热门搜索
          </h4>
          <div class="table">
            <pieVue
              :title="'销售'"
              :data="visi"
              :height="420"
              :hasLegend="true"
              :inner="100"
              :subTitle="'销售额'"
              :total="'1000个'"
              :label="false"
              :padding="[0, 60, 0, 0]"
            ></pieVue>
          </div>
        </div>
      </a-col>
    </a-row>
    <a-row class="mt20 bgff_pdlr16" :justify="'start'">
      <a-col :span="24">
        <div class="pdt10">
          <v2Timeline
            :titleMap="{ y1: '指标一', y2: '指标二' }"
            :data="linezx"
            :hasLegend="true"
            :height="400"
            :title="'销售额'"
            :Legendpad="['center', 10, 0, 0]"
            :color="'#1890ff'"
            :padding="[10, 50, 500, 10]"
          ></v2Timeline>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import {
  QuestionCircleTwoTone,
  CaretUpOutlined,
  CaretDownOutlined,
  InfoCircleOutlined,
} from "@ant-design/icons-vue";
import { onMounted, onUpdated, ref } from "vue";
import { Dayjs } from "dayjs";
import dayjs from 'dayjs'
import * as echarts from "echarts";
import { getTimeDistance } from "@/package/util/date-time/time";
import numberInfoVue from "@/package/chart/number-info.vue";
import v2MiniAreaVue from "@/package/chart/v2-mini-area.vue";
import { throttle } from "@/plugIn/common/common";
import v2BarVue from "@/package/chart/v2-bar.vue";
import trendVue from "@/package/chart/trend.vue";
import cardVue from "@/package/chart/card.vue";
import pieVue from "@/package/chart/pie.vue";
import v2Timeline from "@/package/chart/v2-timeline.vue";
import { post, get } from "@/services/api/request";

const y = ref<any[]>([1, 4, 2, 5, 2, 5, 2]);

setInterval(() => {
  y.value = y.value.map((value: any) => {
    return value + Math.random();
  });
}, 1000);



const router = useRouter();
//今日  本周  本月 全年 数据
const time = ref<{ [key: string]: any }>([
  { name: "今日", key: "0", RangeValue: getTimeDistance("today") },
  { name: "本周", key: "1", RangeValue: getTimeDistance("week") },
  { name: "本月", key: "2", RangeValue: getTimeDistance("month") },
  { name: "全年", key: "3", RangeValue: getTimeDistance("year") },
]);
type RangeValue = [Dayjs, Dayjs];
console.log(dayjs(new Date(1649754861245)).format('YYYY/MM/DD HH:mm:ss'))
//今日  本周  本月 全年 选中
const timeSeleftKey = ref<string>("0");

//今日  本周  本月 全年 切换
const timeSelect = (value: string) => {
  timeSeleftKey.value = value;
  value2.value = time.value[Number(value)].RangeValue;
};

//日期范围
const value2 = ref<RangeValue>(time.value[0].RangeValue);

const listrank = ref([
  { title: "工业路", id: 1, rank: 1 },
  { title: "工业路", id: 1, rank: 2 },
  { title: "工业路", id: 1, rank: 3 },
  { title: "工业路", id: 1, rank: 4 },
  { title: "工业路", id: 1, rank: 5 },
  { title: "工业路", id: 1, rank: 6 },
  { title: "工业路", id: 1, rank: 7 },
]);

const submitChange = (value?: any) => {
  console.log("submitChange", value);
};
onMounted(() => {
  //图表挂载 延迟加载一会 为获取正常的节点宽度
  setTimeout(creatEchartvisit);
});

const changTabs = (activeKey: any) => {
  if (activeKey == 1) {
    setTimeout(() => {});
  } else {
    setTimeout(() => {});
  }
};
//销售额
const sale = ref({
  x: [
    "一月",
    "二月",
    "三月",
    "四月",
    "五月",
    "六月",
    "七月",
    "八月",
    "九月",
    "十月",
    "十一月",
    "十二月",
  ],
  y: [
    120,
    200,
    150,
    80,
    {
      value: 200,
      itemStyle: {
        color: "#91cc75",
      },
    },
    110,
    130,
    70,
    110,
    130,
    80,
    70,
  ],
});

setInterval(() => {
  sale.value = {
    x: [
      "一月",
      "二月",
      "三月",
      "四月",
      "五月",
      "六月",
      "七月",
      "八月",
      "九月",
      "十月",
      "十一月",
      "十二月",
    ],
    y: [
      120 + Math.random() * 25,
      200,
      150,
      80,
      {
        value: 200,
        itemStyle: {
          color: "#91cc75",
        },
      },
      110,
      130,
      70,
      110,
      130,
      80,
      70,
    ],
  };
}, 1000);

const clickeven = function (params: any) {
  console.log(params);
};

//折线图
const linezx = ref({
  x: [
    "一月",
    "二月",
    "三月",
    "四月",
    "五月",
    "六月",
    "七月",
    "八月",
    "九月",
    "十月",
    "十一月",
    "十二月",
  ],
  y1: [
    100,
    200,
    150,
    80,
    {
      value: 200,
      itemStyle: {
        color: "#91cc75",
      },
    },
    120,
    110,
    70,
    110,
    130,
    180,
    70,
  ],
  y2: [120, 100, 90, 180, 100, 60, 90, 90, 100, 70, 120, 70],
});
const visi = ref(null)
const creatEchartvisit = () => {
  //支付笔数
  const paysum = () => {
    let myChart = echarts.init(document.getElementById("zfbs") as HTMLElement);
    const option = {
      grid: {
        left: "20",
        top: "5",
        show: false,
        height: 44,
      },
      xAxis: {
        type: "category",
        show: false,
        boundaryGap: false,
        data: [
          "2010-06-05",
          "2010-06-05",
          "2010-06-05",
          "2010-06-05",
          "2010-06-05",
          "2010-06-05",
          "2010-06-05",
          "2010-06-05",
          "2010-06-05",
          "2010-06-05",
          "2010-06-05",
          "2010-06-05",
          "2010-06-05",
          "2010-06-05",
        ],
      },
      yAxis: {
        show: false,
        type: "value",
        axisTick: {
          alignWithLabel: true,
          length: 1,
        },
      },
      //是否显示提示框组件
      tooltip: {
        show: true,
        trigger: "axis",
      },
      series: [
        {
          data: [4, 3, 4, 5, 4, 3, 2, 4, 3, 4, 5, 4, 3, 2],
          type: "bar",
          smooth: true,
          areaStyle: {},
          itemStyle: {
            color: "#44a5ff",
          },
          clip: true,
          symbol: "none",
          //视觉引导线
          lineStyle: {
            width: 0,
          },
          barWidth: 10,
        },
      ],
    };

    myChart.setOption(option);
  };
  //访问量
   visi.value = {
    x: [
      "一月",
      "二月",
      "三月",
      "四月",
      "五月",
      "六月",
      "七月",
      "八月",
      "九月",
      "十月",
      "十一月",
      "十二月",
    ],
    y: [
      100,
      200,
      150,
      80,
      {
        value: 200,
        itemStyle: {
          color: "#91cc75",
        },
      },
      120,
      110,
      70,
      110,
      130,
      180,
      70,
    ],
  };

  paysum();
};

const dataSource = ref<any[]>();

post("rank", "", "").then((res) => {
  dataSource.value = res.page.list;
});

const pagination = {
  pageSizeOptions: ["5", "10", "20", "30"],
  showSizeChanger: true,
  size: "small",
  defaultPageSize: 5,
};
const columns = ref([
  {
    title: "排名",
    dataIndex: "rank",
    key: "pm",
  },
  {
    title: "搜索关键词",
    dataIndex: "keyword",
    key: "keyword",
  },
  {
    title: "用户数",
    dataIndex: "peopleNum",
    key: "user",
  },
  {
    title: "周涨幅",
    dataIndex: "weekup",
    key: "weekUp",
  },
]);
</script>

<style lang="less" scoped>
.cobt {
  padding-top: 9px;
  border-top: 1px solid #f0f0f0;
}
.h44 {
  height: 44px;
}
.mb12 {
  margin-bottom: 12px;
}
.ml12 {
  margin-left: 12px;
}
.ml5 {
  margin-left: 5px;
}
.ml15 {
  margin-left: 15px;
}
.valueStyle {
  font-size: 12px;
  color: red;
}
.sales-extra {
  margin-right: 20px;
  span {
    line-height: 28px;
    display: inline-block;
    padding: 0 8px;
    cursor: pointer;
  }
  span.select {
    color: #1890ff;
  }
}
#xsqs {
  height: 320px;
}
#fwqx {
  height: 320px;
}
.rank {
  padding: 0 32px 32px 72px;
  .rank-list {
    margin: 25px 0 0;
    padding: 0;
    list-style: none;
    li {
      display: flex;
      align-items: center;
      margin-top: 16px;
      .title {
        flex: 1;
        margin-right: 8px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      span {
        font-size: 14px;
        line-height: 22px;
      }
      .number {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-top: 1.5px;
        margin-right: 16px;
        font-weight: 600;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
        background-color: #f5f5f5;
        border-radius: 20px;
      }
      .number.active {
        color: #fff;
        background-color: #314659;
      }
    }
  }
}
.contentFixed {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  .miniProgress {
    position: relative;
    width: 100%;
    padding: 5px 0;
    .target {
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 9;
      width: 20px;
      span {
        position: absolute;
        top: 0;
        left: 0;
        width: 2px;
        height: 4px;
        border-radius: 100px;
      }
      span:last-child {
        top: auto;
        bottom: 0;
      }
    }
    .progressWrap {
      position: relative;
      background-color: #f5f5f5;
      .progress {
        border-radius: 1px 0 0 1px;
        width: 0;
        height: 100%;
        transition: all 0.4s;
      }
    }
  }
}
.table {
  padding: 10px;
}
</style>
